<template>
  <div class="fixed bottom-0 left-64 right-0 z-50 bg-white border-t border-gray-200 p-4 flex items-center shadow-inner">
    <!-- 搜索按钮 -->
    <button @click="showSearch = true" class="mr-3 text-gray-600 hover:text-gray-800 transition">
      <span class="text-xl">🔍</span>
    </button>
    <SearchDialog :visible="showSearch" @search="onSearch" @close="() => (showSearch = false)" />

    <!-- 表情按钮 -->
    <div class="relative">
      <button @click="toggleEmoji" class="mr-3 text-gray-600 hover:text-gray-800 transition">
        <span class="text-xl">😃</span>
      </button>
      <EmojiPicker
        v-if="showEmoji"
        @select="addEmoji"
        class="absolute bottom-[72px] left-0 bg-white rounded-xl shadow-lg p-4 z-50 w-[300px] max-h-[240px] overflow-auto"
      />
    </div>

    <!-- 文件上传 -->
    <button @click="triggerFileUpload" class="mr-3 text-gray-600 hover:text-gray-800 transition">
      <span class="text-xl">📎</span>
    </button>
    <input ref="fileInput" type="file" class="hidden" accept="*/*" @change="onFileChange" />

    <!-- 消息输入框 -->
    <input
      v-model.trim="message"
      type="text"
      placeholder="请输入消息…"
      class="flex-1 h-10 px-4 py-2 mr-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-200 transition"
      @keyup.enter="send"
    />

    <!-- 发送按钮 -->
    <button @click="send" class="h-10 px-5 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition">
      发送
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { defineProps, defineEmits } from 'vue'
import { addMessage } from '@/utils/mockData'
import { getCurrentUser } from '@/utils/storage'
import type { Message } from '@/utils/mockData'

import EmojiPicker from './EmojiPicker.vue'
import SearchDialog from './SearchDialog.vue'

const props = defineProps<{ sessionId: number }>()
const emit = defineEmits<{
  (e: 'sent'): void
  (e: 'search', payload: { keyword: string; types: string[] }): void
}>()

const message = ref('')
const showEmoji = ref(false)
const showSearch = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)

function send() {
  const content = message.value.trim()
  if (!content) return
  addMessage({
    sessionId: props.sessionId,
    from: getCurrentUser()?.nickname ?? '你',
    type: 'text',
    content,
  } as Omit<Message, 'id' | 'time'>)
  message.value = ''
  emit('sent')
}

function addEmoji(emoji: string) {
  message.value += emoji
  showEmoji.value = false
  nextTick(() => {
    document.querySelector<HTMLInputElement>('input[type="text"]')?.focus()
  })
}

function triggerFileUpload() {
  fileInput.value?.click()
}

function onFileChange(e: Event) {
  const files = (e.target as HTMLInputElement).files
  if (!files || !files[0]) return
  const file = files[0]

  addMessage({
    sessionId: props.sessionId,
    from: getCurrentUser()?.nickname ?? '你',
    type: 'file',
    content: file.name,
  } as Omit<Message, 'id' | 'time'>)

  emit('sent')
  if (fileInput.value) fileInput.value.value = ''
}

function toggleEmoji() {
  showEmoji.value = !showEmoji.value
}

function onSearch(payload: { keyword: string; types: string[] }) {
  emit('search', payload)
}
</script>
